:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: linear-gradient(135deg, #0E5CAD 10%, #3BB584 100%);

  /* --vp-home-hero-image-background-image: linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%);
  --vp-home-hero-image-filter: blur(150px); */

  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: #BCA5AE;

  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-hover-bg: #A696AB;

  --vp-button-brand-active-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-active-bg: #858AA6;
}

.dark {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: linear-gradient(135deg, #1D6FA3 10%, #65FDF0 100%);

  --vp-home-hero-image-background-image: linear-gradient(135deg, #FD6585 10%, #0D25B9 100%);
  --vp-home-hero-image-filter: blur(80px);

  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: #1D6FA3;

  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #ffffff;
  --vp-button-brand-hover-bg: #005E90;

  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: #ffffff;
  --vp-button-brand-active-bg: #004271;
}

.VPNavBarTitle .logo {
  margin-right: 1rem;
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(160px);
  }
}
